<template>
  <div class="form-comp">
    <div class="toolbar-item toolbar-select"
         v-if="label">
      <el-input size="default"
                :style="{width:(label.length==2?'68px':label.length==3?'82px':label.length==4?'96px':label.length==7?'138px':label.length==6?'128px':''),float:'left'}">
        <template #prepend>{{ label }}</template>
      </el-input>

      <el-tree-select v-model="compValue"
                      placeholder="请选择"
                      size="default"
                      check-strictly
                      :props="defaultProps"
                      clearable
                      :default-expanded-keys="expandedKeys"
                      :disabled="disabled"
                      node-key="regionCode"
                      lazy
                      :load="compData"
                      :class="label.length==3?'prepend-3':label.length==4?'prepend-4':label.length==5?'prepend-5':label.length==6?'prepend-6':label.length==7?'prepend-7':'prepend-2'"
      />
    </div>
    <el-tree-select v-model="compValue"
                    v-else
                    placeholder="请选择"
                    size="default"
                    check-strictly
                    :default-expanded-keys="expandedKeys"
                    :props="defaultProps"
                    clearable
                    :disabled="disabled"
                    node-key="regionCode"
                    lazy
                    :load="compData"
    />
  </div>

</template>

<script lang="ts" setup>
//定义组件名称
defineOptions({
  name: "FormRegionSelect"
});
// @ts-ignore
import {ref, getCurrentInstance, watchEffect, watch} from 'vue'

const props = defineProps({
  label: {type: String, required: false},
  value: {type: String, required: true},
  dictType: {type: String, required: true},
  disabled: {type: Boolean, required: false}

});

const compValue = ref(props.value);

//默认展开
const expandedKeys = ref<any>([]);

const defaultProps = {
  label: 'regionName',
  children: 'children',
  isLeaf: 'isLeaf',
}

const emit = defineEmits(['update:value'])

// @ts-ignore
let {proxy} = getCurrentInstance()

//加载数据
const compData = (node: any, resolve: any) => {
  if (node.isLeaf) return resolve([])
  let paramsId = "";
  if (node.key) {
    paramsId = node.key;
  }
  proxy.$http.tablePost("/user-center/region/selectTree", {parentCode: paramsId}).then((res: any) => {
    resolve(res.data.data)
  });
}

//监听变化
watch(() => props.value, () => {
  compValue.value = props.value;
  expandedKeys.value = [];
  proxy.$http.post("/user-center/region/findOne", {id: props.value}).then((res: any) => {
    if (res.success) {
      let gradeCode = res.data.gradeCode;
      let regionCodes = gradeCode.split("-");
      for (let i = 0; i < regionCodes.length; i++) {
        if (regionCodes[i] && regionCodes[i] != "") {
          expandedKeys.value.push(parseInt(regionCodes[i]));
        }
      }
    }
  });
})

//监听变化返回
watch(() => compValue.value, () => {
  emit("update:value", compValue.value)
})
</script>

<style scoped>

</style>
